<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <form action="">
        姓名：<input type="text" class="username" /><br /> qq: <input type="text" class="qq" /><br /> 网址： <input type="text" class="web" /><br /> 身份证： <input type="text" class="ID" /><br /> 手机号： <input type="text" class="phone" /><br /> 邮箱： <input type="text"
            class="email" /><br />

        <input type="submit" value="提交" />
        <hr />
        <span class="info">提示信息</span>
    </form>
    <script>
        //  <!-- 1. 用正则验证一个数是否在0-666之间 -->
        //0-666:拆分：
        // 1位：0-9
        /*  var reg = /^[0-9]$/;
                                                            var str = "5";
                                                            console.log(reg.test(str)); */
        //2位：[1-9][0-9]:10-99
        /*  var reg = /^[1-9][0-9]$/;
                                                      var str = "10";
                                                      console.log(reg.test(str)); */
        //3位：1[0-9]

        /*  var reg =
                                                /(^[0-9]$)|(^[1-9][0-9]$)|(^1[0-9][0-9]$)|(^2[0-9][0-9]$)|(^3[0-9][0-9]$)|(^4[0-9][0-9]$)|(^5[0-9][0-9]$)|(^6[0-5][0-9]$)|(^66[0-6]$)/;
                                            var str = "666";
                                            console.log(reg.test(str)); */

        /*  2. 实现一个表单注册提交验证， 表单包含 姓名、 密码、 邮箱、 电话， 符合规则可以提交 否则提示不能提交
                                                -
                                                名字： 中文 且 2 - 4 个字符 `[\u4e00-\u9fa5]` -
                                                手机号： 1 开头 第二位是3456789 且 11 位 -
                                                邮箱： 数字字母下划线构成 @数字字母(2 - 多个) .2 - 4 字母 .2 - 4 字母（ 可有可无） ``
                                            `js
                                              fdaf12_fds@qq.com.cn
                                          `
                                            `` -
                                            qq号： 开头1 - 9 中间 0 - 9 最少5位 最多11位 -
                                                密码强度： ``
                                            `js
                                              1.密码不低于8位
                                              2.如果是纯数字或者纯字母 密码强度低
                                              3.包含数字字母 密码强度中
                                              4.包含数字字母下划线且有大写字母 密码强度高
                                          `
                                            `` */

        // 1,姓名：中文2-4位[\u4e00-\u9fa5]:匹配中文字符
        var usernameEle = document.querySelector(".username");
        var infoEle = document.querySelector(".info");
        usernameEle.onblur = function() {
            var reg = /^[\u4e00-\u9fa5]{2,4}$/g;
            var val = this.value;
            if (reg.test(val)) {
                infoEle.innerHTML = "姓名符合规则";
                infoEle.style.color = "green";
            } else {
                infoEle.innerHTML = "姓名不符合规则";
                infoEle.style.color = "red";
            }
        };

        //2.qq:开头1-9 中间0-9 总 5-11位
        var reg = /^[1-9]\d{4,10}$/g;
        var qqEle = document.querySelector(".qq");
        var infoEle = document.querySelector(".info");
        qqEle.onblur = function() {
            var val = this.value;
            if (reg.test(val)) {
                infoEle.innerHTML = "qq符合规则";
                infoEle.style.color = "green";
            } else {
                infoEle.innerHTML = "qq不符合规则";
                infoEle.style.color = "red";
            }
        };
        //3.网址：
        var reg =
            /^(http)|(https):\/\/www\.\w{2,}\.([a-zA-Z]{3})+\.([a-zA-Z]{2})?$/g;
        var reg = /^(http)|(https):\/\/www\.\w{2,}(.\w{3}$)|(.\w{3}\.w{2}$)/g;

        // 配置网址 ：http 或者是https开头 www.数字字符下划线.字符是2个或者三个（com，cn）最少一个 最多2次
        // https://www.baidu.com.cn  .com可以是2位或者是3位 .com 可以出现1次或者2次 ；
        var reg = /^https?:\/\/www\.\w{2,}(\.\w{2,3}){1,2}$/;

        // https://www.数字字符下划线(.com) 或者(.com.nn)
        var reg = /^https?:\/\/www\.\w{2,}(\.\w{3})$|(\.\w{3}\.\w{2})$/;
        var webEle = document.querySelector(".web");
        var infoEle = document.querySelector(".info");
        webEle.onblur = function() {
            var val = this.value;
            console.log(val);
            if (reg.test(val)) {
                infoEle.innerHTML = "网址符合规则";
                infoEle.style.color = "green";
            } else {
                infoEle.innerHTML = "网址不符合规则";
                infoEle.style.color = "red";
            }
        };
        //4.
    </script>
</body>

</html>